<script setup lang="ts">
  import { computed, CSSProperties } from 'vue'

  defineOptions({
    name: 'CustomTitle5',
  })

  const props = defineProps({
    title: {
      type: String,
      default: () => '这是标题',
    },
    titleColor: {
      type: String,
      default: () => '#007cff',
    },
    desc: {
      type: String,
      default: () => '',
    },
    dividerColor: {
      type: String,
      default: () => '#007cff',
    },
  })

  const titleStyle = computed<CSSProperties>(() => {
    return {
      color: props.titleColor,
    }
  })

  const titleColorBlockStyle = computed<CSSProperties>(() => {
    return {
      backgroundColor: props.dividerColor,
      width: 'fit-content',
      height: '28px',
      padding: '0 12px 0 12px',
      boxSizing: 'content-box',
      lineHeight: '28px',
    }
  })

  const colorBlockStyle = computed<CSSProperties>(() => {
    return {
      width: '0',
      flex: '1',
      position: 'relative',
    }
  })

  const colorBloackLine = computed<CSSProperties>(() => {
    return {
      width: '100%',
      height: '3px',
      backgroundColor: props.dividerColor,
      position: 'absolute',
      right: '0',
      bottom: '0',
    }
  })

  const mainColorBlockStyle = computed<CSSProperties>(() => {
    return {
      width: '15px',
      transform: 'skew(26deg) translateX(-50%)',
      backgroundColor: props.dividerColor,
      height: '100%',
    }
  })

  const childColorBlock1 = computed<CSSProperties>(() => {
    return {
      width: '8px',
      height: '22px',
      backgroundColor: props.dividerColor,
      opacity: '0.9',
      transform: 'skew(26deg) translateX(-50%)',
      left: '15px',
      top: '0',
      position: 'absolute',
    }
  })

  const childColorBlock2 = computed<CSSProperties>(() => {
    return {
      width: '8px',
      height: '22px',
      backgroundColor: props.dividerColor,
      opacity: '0.6',
      transform: 'skew(26deg) translateX(-50%)',
      left: '27px',
      top: '0',
      position: 'absolute',
    }
  })

  const childColorBlock3 = computed<CSSProperties>(() => {
    return {
      width: '8px',
      height: '22px',
      backgroundColor: props.dividerColor,
      opacity: '0.3',
      transform: 'skew(26deg) translateX(-50%)',
      left: '39px',
      top: '0',
      position: 'absolute',
    }
  })
</script>

<template>
  <div class="custom-title5">
    <div class="title-container">
      <div class="title-color-block" :style="titleColorBlockStyle">
        <div class="title" :style="titleStyle">{{ props.title }}</div>
      </div>
      <div class="color-block" :style="colorBlockStyle">
        <div class="main-color-block" :style="mainColorBlockStyle"></div>
        <div class="child-color-block1" :style="childColorBlock1"></div>
        <div class="child-color-block2" :style="childColorBlock2"></div>
        <div class="child-color-block3" :style="childColorBlock3"></div>
        <div class="line" :style="colorBloackLine"></div>
      </div>
    </div>
    <div v-if="props.desc" class="desc">{{ props.desc }}</div>
  </div>
</template>

<style scoped lang="scss">
  .custom-title5 {
    display: flex;
    row-gap: 8px;
    width: 100%;
    flex-direction: column;

    .title-container {
      display: flex;
    }
  }
</style>
